<template>
  <div class="FilmDetail">
    <div class="FilmDetailInner">
      <div class="Head">
        <el-page-header @back="goBack" :content="pageMsg"> </el-page-header>
      </div>
      <!-- 剧情简介 -->
      <div class="introduction">
        <span>剧情简介</span>
        <span>{{ msg }}</span>
      </div>
      <!-- 电影评论 -->
      <div class="FilmComment">
        <span>电影评论</span>
        <div
          class="CommentMsg"
          v-for="(userEvaluation, index) in userEvaluations"
          :key="index"
        >
          <img :src="userEvaluation.user.avatar" alt="" />
          <span>{{ userEvaluation.user.nickname }}</span>
          <el-rate
            v-model="userEvaluation.filmEvaluate.star"
            disabled
            show-score
            text-color="#ff9900"
            score-template=""
          >
          </el-rate>
          <span>{{ userEvaluation.filmEvaluate.comment }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/utils/busvue.js";
export default {
  name: "FilmDetail",
  props: ["msg", "userEvaluations"],
  data() {
    return {
      Id: "",
      pageMsg: "详情页面",
      FilmStar: 0,
      briefInt:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales  pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, se d rhoncus pronin sapien nunc accuan eget.",
    };
  },
  methods: {
    goBack: function () {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.Id = this.$route.query.id;
    this.$emit("getFilmId", this.Id);
    bus.$on("updateEva", (val) => {
      setTimeout(() => {
        this.$emit("getFilmEva");
      }, 500);
    });
  },
};
</script>

<style lang="less" scoped>
.FilmDetail {
  width: 100%;
  margin-top: 100px;
  .FilmDetailInner {
    width: 1200px;
    margin: 0 auto;
    .introduction {
      margin-top: 40px;
      span:nth-child(1) {
        font-size: 24px;
        font-weight: bold;
      }
      span:nth-child(2) {
        display: block;
        margin-top: 60px;
        text-indent: 4em;
      }
    }
    .FilmComment {
      margin: 40px 0;
      span:nth-child(1) {
        font-size: 24px;
        font-weight: bold;
      }
      .CommentMsg {
        margin-top: 30px;
        position: relative;
        img {
          width: 50px;
          height: 50px;
          border-radius: 25px;
        }
        span:nth-child(2),
        span:nth-child(4) {
          position: absolute;
          left: 65px;
          top: 5px;
          font-size: 14px;
          color: #aaaaaa;
        }
        .el-rate {
          position: absolute;
          left: 60px;
          top: 25px;
        }
        span:nth-child(4) {
          top: 50px;
          font-size: 18px;
          text-indent: 2em;
        }
      }
    }
  }
}
</style>